<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/jsp/comm_css_include.jsp"%>
<!-- zTreeStyle.css -->
<link rel="stylesheet" type="text/css" href="${basePath}/css/zTreeStyle/zTreeStyle/zTreeStyle.css">
<!doctype html>
<html>
<head>
	<style type="text/css">
	   .gray-bg
	   {
	     background-color: #fff;
	   }
	</style>
</head>
<body class="gray-bg">
	 <div class="ibox-content">
		<form class="form-horizontal m-t" id="commentForm">
			<table cellpadding="0" cellspacing="0" border="0" bordercolor="#3B95C8"  width="100%" class="tablefont">
				<tr>
				    <td width="50%" align="right">
				    	<label class="col-sm-3 control-label np">职位编号：</label>
						<div class="form-group">
		    				<div class="col-sm-8">
		    					<input id="positionId" name="positionId" minlength="1" maxlength="64" type="text" class="form-control"  aria-required="true" placeholder="请输入职位编号" >
		    				</div>
	    				</div>
					</td>
				    <td width="50%" align="right">
				    	<label class="col-sm-3 control-label np">登录名称：</label>
						<div class="form-group">
		    				<div class="col-sm-8">
		    					<input id="loginName" name="loginName" minlength="1" maxlength="64" type="text" class="form-control" required="" aria-required="true" placeholder="请输入用户名称(必填)" >
		    				</div>
	    				</div>
					</td>
				</tr>
					
				<tr>
				    <td width="50%" align="right">
				    	<label class="col-sm-3 control-label np">用户姓名：</label>
						<div class="form-group">
		    				<div class="col-sm-8">
		    					<input id="uname" name="uname" minlength="1" maxlength="64" type="text" class="form-control" required="" aria-required="true" placeholder="请输入用户姓名(必填)" >
		    				</div>
	    				</div>
					</td>
				    <td width="50%" align="right">
				    	<label class="col-sm-3 control-label np">贷款银行：</label>
						<div class="form-group">
		    				<div class="col-sm-8">
		    					<input id="loanBank" name="loanBank" type="hidden" />
		    					<input id="loanBankName" name="loanBankName" type="text" class="form-control smalliconcur smallicon" readonly="readonly"  onclick="loanBankCho()" placeholder="贷款银行 " >
		    				</div>
	    				</div>
					</td>
				</tr>
				
				<tr>
				    <td width="50%" align="right">
				    	<label class="col-sm-3 control-label np">手机号码：</label>
						<div class="form-group">
		    				<div class="col-sm-8">
		    					<input id="phone" name="phone" minlength="11" maxlength="11" type="number" class="form-control" required="" aria-required="true" placeholder="请输入手机号码(必填)" />
		    				</div>
	    				</div>
					</td>
				    <td width="50%" align="right">
				    	<label class="col-sm-3 control-label np">账号类型：</label>
						<div class="form-group">
		    				<div class="col-sm-8">
		    					<select id="accountType" name="accountType"  class="select-control">
								</select>
		    				</div>
	    				</div>
					</td>
				</tr>
				<tr>
				    <td width="50%" align="right">
				    	<label class="col-sm-3 control-label np">邮箱地址：</label>
						<div class="form-group">
		    				<div class="col-sm-8">
		    					<input id="mailbox" name="mailbox" minlength="1" maxlength="32" type="email" class="form-control"  aria-required="true" placeholder="请输入邮箱地址" />
		    				</div>
	    				</div>
					</td>
				    <td width="50%" align="right">
				    	<label class="col-sm-3 control-label np">行政机构：</label>
						<div class="form-group">
		    				<div class="col-sm-8">
		    					<input id="orgId" name="orgId"  type="hidden" />
		    					<input id="orgName" name="orgName" type="text" required="required" class="form-control smalliconcur smallicon" readonly="readonly" placeholder="请选择行政机构(必填)" onclick="companyCho()"/>
		    				</div>
	    				</div>
					</td>
				</tr>
				
				<tr>
					<td width="50%" align="right"  class="glywy">
				    	<label class="col-sm-3 control-label np">关联业务员：</label>
						<div class="form-group">
		    				<div class="col-sm-8">
		    					<input id="salersmanId" name="salersmanId" type="hidden"/>
		    					<input id="salersmanCode" name="salersmanCode" type="hidden"/>
		    					<input id="salersmanName" name="salersmanName" type="text" class="form-control smalliconcur smallicon" readonly="readonly" required="required" placeholder="请选择关联业务员(必填)"  onclick="gLywyCho()"/>
		    				</div>
	    				</div>
					</td>
				    
				    <td width="50%" align="right" valign="top">
				    	<label class="col-sm-3 control-label np">备注：</label>
						<div class="form-group">
		    				<div class="col-sm-8">
		    					<textarea id="remarks" name="remarks" cols="20" rows="1" type="text" class="textarea-control" aria-required="true" placeholder="请输入备注" ></textarea>
		    				</div>
	    				</div>
					</td>
				</tr>
				<tr>
				    <td width="50%" align="right">
				    	<label class="col-sm-3 control-label np">用户头像：</label>
						<div class="form-group">
		    				<div class="col-sm-8">
		    					<input id="id" name="id" type="hidden" value="" /> 
					  			<input id="busiId" name="busiId" type="hidden" value="" /> 
								<input id="customerId" name="customerId" type="hidden" value="sys_user" /> 
				    				<div class="zx-addimg">
				    					<ul id="YONG_HU_TOU_XIANG">
								        	<li style="margin:0">
												<img filelabel="${attachmentLabelNames.YONG_HU_TOU_XIANG }"
												src="${basePath}/img/shangchuanzhaopian.png" width="110px" height="110px" class="zx-imgPre ${attachmentLabelNames.YONG_HU_TOU_XIANG }">
												<span filelabelDelSpan="${attachmentLabelNames.YONG_HU_TOU_XIANG }" class="hidden bt-cancle glyphicon glyphicon-trash" onclick="deleleFileRecord(this,'${attachmentLabelNameValues.YONG_HU_TOU_XIANG }',false);"></span>
												<div class="img-layer">
													<div></div>
													<span filelabelLabelSpan="${attachmentLabelNames.YONG_HU_TOU_XIANG }">${attachmentLabelNameValues.YONG_HU_TOU_XIANG }</span>
												</div>
												<a href="javascript:void(0);" class="file">
													<span>上传资料</span> 
													<input type="file" accept="image/gif,image/jpeg,image/bmp,image/png,image/jpg" onchange="uploadFile(this,'${modeIDTypeNames.YONGHUGUANLI }','YONG_HU_TOU_XIANG', false, false);" />
												</a>
											</li>
										</ul>
									</div>
				    				
		    				</div>
	    				</div>
					</td>
					<td width="50%" align="right" valign="top">&nbsp;</td>
				</tr>
				
			</table>
			<table cellpadding="0" cellspacing="0" border="0" bordercolor="#3B95C8"  width="100%">
				<tr>
					<td width="100%" align="center">
						 <div class="ibox-content">
				              <button type="button" class="btn dpbtn_green" onclick="save();">确定</button>
				              <button type="button" class="btn dpbtn_red" onclick="Reset();">重置</button>
				          </div>
					</td>
				</tr>
			</table>
		</form>

	</div>
	
	<div id="loanBankCho" style="display: none;">
		<div class="business-padding">
			<ul id="loanBankChoul"></ul>
			<div class="div-fixed">
				<table cellpadding="0" cellspacing="0" border="0" bordercolor="#3B95C8"  width="100%">
					<tr>
						<td width="100%" align="center">
							 <div class="ibox-content">
					              <button type="button" class="btn dpbtn_green" onclick="loanBankSave();">确定</button>
					              <button type="button" class="btn dpbtn_red" onclick="loanBankCancel();">取消</button>
					          </div>
						</td>
					</tr>
				</table>
			</div>
		</div>	
	</div>
	<!-- public quote -->
    <%@include file="/jsp/comm_js_include.jsp"%>
     <!-- 文件上传 -->
    <%@include file="/jsp/common_fileupload_include.jsp"%>

 	<!-- custom js -->
    
	<script type="text/javascript" src="${basePath}/js/commonvalidate.js" charset="utf-8"></script>
	
     <!--zTreeStyle.js-->
	<script type="text/javascript" src="${basePath}/js/zTreeStyle/jquery.ztree.core.js" charset="utf-8"></script>
	<script type="text/javascript" src="${basePath}/js/zTreeStyle/jquery.ztree.excheck.js" charset="utf-8"></script>

    <!--
    	作者：zhangpp
    	时间：2017-04-06
    	描述：js
    -->
    <script type="text/javascript">
      $(function(){	
    	  LoanBankData();
    	  accountTypeData();
      });	
      
      function LoanBankData(){
    	  $.dpAjax({
    		  	show:false,
    	    	url:'${basePath}/DataDictionaryController/getEnableList',
     			data:{"parentValue":"LoanBank"},
     			success: function(datas){
     			  var result = datas.result.rows;
  				  var arr=[];
  			      for(var i=0;i<result.length;i++){
  			          var programme = result[i];
  			          arr.push('<li><label><input class="loanBankCheckBox" type="checkbox" value="'+programme.value+'" name="'+programme.name+'"/>'+programme.name+'</label></li>')
  			      }
  			      $("#loanBankChoul").html(arr);
               }
    	   });
      }
      
      
      function accountTypeData(){
    	  $.dpAjax({
    		    show:false,
    	    	url:'${basePath}/DataDictionaryController/getEnableList',
     			data:{"parentValue":"AccountType"},
     			success: function(datas){
     			  var result = datas.result.rows;
  				  var html="";
  			      for(var i=0;i<result.length;i++){
  			          var programme = result[i];
  			          html += '<option value="'+programme.value+'">'+programme.name+'</option>';
  			      }
  			      $("#accountType").html(html);
               }
    	   });
      } 
      
    //关联业务员判断
	  $("#accountType").change(function(){
		  var accountTypeval = $("#accountType").val();
		  if(accountTypeval =="0"){
			  $(".glywy").show();
			  $("#salersmanName").attr("required","required");
	          $("#salersmanName").attr("placeholder","请选择关联业务员(必填)");
		  }else if(accountTypeval =="1"){
        	 $(".glywy").hide();
        	 $("#salersmanName").val("");
        	 $("#salersmanId").val("");
        	 $("#salersmanCode").val("");
          }else if(accountTypeval =="2"){
        	 $(".glywy").show();
        	 $("#salersmanName").val("");
        	 $("#salersmanId").val("");
        	 $("#salersmanCode").val("");
        	 $("#salersmanName").removeAttr("required","required");
        	 $("#salersmanName").attr("placeholder","请选择关联业务员");
        	 
          }
   	  })		
     
   	  var glywyLayer;
   	  
   	  function gLywyCho(){
    	    var accountType = $("#accountType").val();
    	    var salersmanId = $("#salersmanId").val();
    	  	$.dpAjax({
    	  		show:false,
    			url:'${basePath}/BaseAccountBusiUnitController/mulitList',
    			data:{salersmanId:salersmanId,accountType : accountType, scene:1, relSalersman : 1},
   				success: function(datas){
   				var content = '<div class="ibox-content" style="height: 380px;border: 1px solid #F5F5F6; overflow:auto;overflow-x: hidden;">'
					+ '	<div id="orgtreeDemo" class="ztree">&nbsp;</div>'
					+ '</div>'
					+ '<div class="ibox-content">'
					+ '<button class="btn dpbtn_green" type="button" onclick="confirmOrg();">确定</button>&nbsp;'
					+ '<button class="btn dpbtn_red" type="button" onclick="cancelOrg();">取消</button>'
					+ '</div>';
		
		    	glywyLayer = layer.open({
			    	  title:'分配关联业务员',
			    	  type: 1,
			    	  area: ['600px', '500px'], //宽高
			    	  content: content
			    });
		    	
			    var setting = {
						check: {
							enable: true
						},
						data: {
							simpleData: {
								enable: true
							},
						},
						callback: {
							onNodeCreated: zTreeOnNodeCreated
						}
			    };			
			  var  arr = [];
			  var d = datas.result.rows;
			  for(var i in d)
			  {  
				  var r = d[i];
				  var objs = {};
				  objs.replaceId = r.replaceId;
				  objs.id = r.orgCode;
				  objs.pId = r.parentCode;
				  objs.name = r.orgName;
        		  objs.open = r.open;
        		  if(r.parentCode == '0'){
       		  	 	 objs.open = true;
 				  }
				  objs.checked = r.checked;
        		  objs.salersman=r.salersman;
				  if(!objs.salersman) {
				  	objs.nocheck = true;
				  }
				  arr.push(objs);
			  }
			    zTrees_ = $.fn.zTree.init($("#orgtreeDemo"), setting, arr);
		 		
			    zTrees_.setting.check.chkboxType={"Y": "", "N": "ps"};		
				
			    return;
   			 }
	       });
      }
      
   	  function cancelOrg(){
   		  layer.close(glywyLayer);
   	  }
   	  
      
	  function zTreeOnNodeCreated(event, treeId, treeNode) {
  		if(treeNode.salersman){
  			$('#'+treeNode.tId+'_ico').css("background", "url('../img/header.png') center center/15px 15px no-repeat");
  		}
  	  }
   	  
	  
	  var confirmOrg = function()
	    {
	        var accountType = $("#accountType").val();
        	if(accountType == 1){
        		layer.msg("内勤不能关联业务员", {icon: 5});
        		return;
        	}
        	
			var treeObj = $.fn.zTree.getZTreeObj("orgtreeDemo");
			var nodes = treeObj.getCheckedNodes();
			var treeNode = nodes[0];
	        var length = nodes.length;
	        if(length == 0) {
	        	$("#salersmanId").val('');
		        $("#salersmanCode").val('');
		        $('#salersmanName').val('');
		        layer.closeAll();
		        return;
	        }
	        if(length != 1) {
	        	layer.msg('请选择一个业务员节点',{icon:7});
	        	return;
	        }
	        
			if(!nodes[0].salersman){
				layer.msg("只能选择业务员节点", {icon: 5});
         		 return;
	        }
			var idUnit = nodes[0].replaceId;
			var codeUnit = nodes[0].id;
			
	        $("#salersmanId").val(idUnit);
	        $("#salersmanCode").val(codeUnit);
	        $('#salersmanName').val(treeNode.name);
	        layer.closeAll();
	    }
	  
      var loanBankCholayer;
      
      function loanBankCho(){
    	   loanBankCholayer = layer.open({
	    	  title:'贷款银行',
	    	  type: 1,
	    	  area: ['400px', '350px'], //宽高
	    	  content: $("#loanBankCho")
	    	});
      }
      
      /**
       * 取消
       */
      function loanBankCancel(){
    	  layer.close(loanBankCholayer);
      }
    
      function loanBankSave(){
    	 var $loanBankCheckBox = $(".loanBankCheckBox:checked");
    	 var values = '';
    	 var names = '';
    	 var length = $loanBankCheckBox.length;
    	 for(var i = 0; i < length; i++) {
    		 values += '|' + $loanBankCheckBox[i].value + '|';
    		 names += $loanBankCheckBox[i].name;
    		 if(i != length - 1) {
    			 names += ',';
    		 }
	 	 }	
    	 $('#loanBank').val(values);
    	 $('#loanBankName').val(names);
    	 layer.close(loanBankCholayer);
      }
    
    //重置
 		var Reset = function(){
			document.getElementById('phone').value = "";
			document.getElementById('mailbox').value = "";
			document.getElementById('orgId').value = "";
			document.getElementById('orgName').value = "";
			document.getElementById('positionId').value = "";
			document.getElementById('remarks').value = "";
			document.getElementById('loanBankName').value = "";
		}
      
	  function companyCho() {
		  $.dpAjax({
			    show:false,
			    url:'${basePath}/BaseOrganizationController/list',
	  			data:{},
	  			success: function(datas){
   				  var content = '<div class="ibox-content" style="height: 230px;border: 1px solid #F5F5F6; overflow:auto;overflow-x: hidden;">'
    					+ '	<div id="treeDemo" class="ztree">&nbsp;</div>'
    				+ '</div>'
    				+ '<div class="ibox-content">'
    				+ '	 <button class="btn dpbtn_green" type="button" onclick="confirmRole();">确定</button>'
    				+ '	 <button class="btn dpbtn_red" type="button" onclick="cancelRole();">取消</button>'
    				+ '</div>';
    		
			    	index = layer.open({
				    	  title:'行政机构',
				    	  type: 1,
				    	  area: ['300px', '350px'], //宽高
				    	  content: content
				    });
			    	var setting = {
		 					check: {
		 						enable: false
		 					},
		 					data: {
		 						simpleData: {
		 							enable: true
		 						}
		 					}
		 			};
		    	    var  arr = [];
   				    var d = datas.result.rows;
   				    for(var i=0;i<d.length;i++)
   				    {  
   					  var r = d[i];
   					  var objs = {};
   					  objs.id = r.replaceId;
   					  objs.name = r.orgName;
   					  objs.pId = r.parentId;
   					  objs.provinceId = r.provinceId;
   					  objs.areaId = r.areaId;
            		  objs.open = true;
   					  arr.push(objs);
   				    }
    				   
   				  	$.fn.zTree.init($("#treeDemo"), setting, arr);
              	}
	    	});	
		}	
		
	   var confirmRole = function() {
	    	 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); 
	    	 var node=zTree.getSelectedNodes();
	    	 var treeNode = node[0];
	    	 if(treeNode.isParent){
	    		 layer.msg("父节点不可选择！", {icon: 5});
	    		 return;
	    	 }
	    	 var parentNode = treeNode.getParentNode();
	    	 if(!parentNode) {
	    		 layer.msg("只能选择行政机构!", {icon: 5});
	    		 return;
	    	 }
	    	 document.getElementById('orgId').value=treeNode.id;
	    	 document.getElementById('orgName').value=treeNode.name;
	    	 layer.closeAll(); 
	    }
		
	    var cancelRole = function() {
		   layer.closeAll(); 
	    }
	   
		var save = function() {
			var validstatus = $("#commentForm").valid();
	    	if(validstatus) {
	    		var data = $('#commentForm').serialize();
    			layer.confirm('您确认要增加吗?', {
   		  			  btn: ['确定','取消'] //按钮
   				},function(){
   					layer.closeAll();
   					$.dpAjax({
   		 	    		url:'${basePath}/user/add',
   		     			data:data,
   		     			success: function(datas){
 		     				 layer.msg("添加执行成功！", {icon: 6});
 		     				 parent.layer.close(parent.addlayer);
   		                 }
   		 	    	});
   				});
	    	}
		}

		$(function(){
	        $("#commentForm").validate({
	            rules: {
	                uname:{chinese: true},
	                phone:{mobile: true}
	            },
	            //重写showErrors
	            showErrors: function (errorMap, errorList) {
	                
	                $.each(errorList, function (i, v) {
	                    layer.tips(v.message, v.element, { time: 1500 });
	                    
	                    return false;
	                });  
	            },
	            /* 失去焦点时验证 */
	            onfocusout: function(element) { $(element).valid(); },
	            /*  键盘抬起不验证 */
	            onkeyup:false
	        });
	        
	        var id = guid();
	        $('#busiId').val(id);
	        $('#id').val(id);
		})
		
		function guid() {
	   	  function S4() {
	   	    return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
	   	  }
	   	  return S4()+S4()+S4()+S4()+S4()+S4()+S4()+S4();
	   	}
    </script>
</body>
</html>
